<template>
	<div class="container home height100">
		<div class="header subheader">
			<Header></Header>
		</div>
		<Map/>
		<!-- <div class="maincontainer wd1200">
			<div class="select-box">
				<div class="box">
					<el-select v-model="street" placeholder="请选择" class="el-select">
						<el-option label="全部街道" value="0"></el-option>
						<el-option label="全部街道1" value="1"></el-option>
						<el-option label="全部街道1" value="2"></el-option>
					</el-select>
				</div>
				<div class="box">
					<el-select v-model="industry" placeholder="行业分类" class="el-select">
						<el-option label="所有状态" value="0"></el-option>
						<el-option label="现行有效" value="1"></el-option>
						<el-option label="已失效" value="2"></el-option>
					</el-select>
				</div>
				<div class="box">
					<el-select v-model="sort" placeholder="默认排序" class="el-select">
						<el-option label="默认排序" value="0"></el-option>
						<el-option label="默认排序1" value="1"></el-option>
						<el-option label="默认排序2" value="2"></el-option>
					</el-select>
				</div>
			</div>
			<div class="enterprise-list" v-loading="loading">
				<div class="list overflow" v-for="item in enterpriselist" :key="item.ID">
					<div class="tag fl">{{item.COMPANY_NAME.substr(0, 2)}}</div>
					<div class="text overflow">
						<div class="title">{{item.COMPANY_NAME}}</div>
						<div class="info">
							<div class="box">法定代表人：{{item.LEGAL_PERSON}}</div>
							<div class="box">注册日期：{{item.OPERATION_STARTDATE}}</div>
							<div class="box">注册资本：{{item.CAPITAL}}</div>
							<div class="box">社保人数：{{item.INSURANCE_AMOUNT_COUNT}}</div>
						</div>
						<div class="address"><span>企业地址：</span>{{item.COMPANY_ADDRESS}}</div>
						<div class="details" @click="details(item.COMPANY_ID,item.CREDIT_NO)">查看详情</div>
					</div>
				</div>

			</div>
			<div class="pagination" v-if="total > 0">
				<el-pagination background layout="prev, pager, next,sizes" @current-change="handleCurrentChange" :page-sizes="[20, 25, 30, 50]" :page-size="5"
					:total="total">
				</el-pagination>
			</div>
			<div class="clearfix"></div>
		</div> -->
		<!-- <Footer></Footer> -->

	</div>
</template>

<script>
	import { sdqygjsslist } from "@/api/enterprise/index";
	import Header from "@/components/header";
	import Footer from "@/components/footer";
	import Map from '@/components/Map/map'

	export default {
		components: {
		  Header,
		  Footer,
		  Map
		},
		data() {
			return {
				street: '0',
				industry: '',
				sort: '',
				entname:'',
				pageNumber:1,
				pageSize:5,
				enterpriselist:[],
				total:0,
				loading: true
			};
		},
		mounted() {
			this.listinit()
		},
		methods: {
			searchname(){
				this.loading = true
				this.pageNumber = 1
				this.listinit()
			},
			listinit() {
			  let queryParams = {
				ent_name:this.entname,
				area_name:"",
				jdmc:"",
				pageNumber:this.pageNumber,
				pageSize:this.pageSize,
				sqmc:"",

			  }
			  sdqygjsslist(queryParams).then(res => {
				  this.loading = false
				  this.enterpriselist = res.data.content
				  this.total = res.data.total
			  });
			},
			handleCurrentChange(val) {
				this.pageNumber = val
				this.loading = true
				this.listinit()
		    },
			query(){
				// this.$router.push({ path:'/query'})
			},
			details(id,uniscid){
				this.$router.push({ path:'/details',query: { id: id, uniscid:uniscid}})
			},
		}
	};
</script>

<style scoped lang="scss">
	.home {
		.header {
			height: 100px;
			background: linear-gradient(180deg, #3460D7 0%, #3D62CC 100%);

			.navbar {
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				height: 100px;
				padding: 0 30px;

				.logo {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100px;
					font-size: 26px;
					color: #fff;
					font-weight: bold;
					margin-right: 8%;

					img {
						margin-right: 11px;
					}
				}

				.nav {
					display: flex;
					height: 100px;
					justify-content: center;
					align-items: center;
					font-size: 20px;
					color: #fff;
					font-weight: bold;
					.box{
						position: relative;
						height: 100px;
						line-height: 100px;
						span{
							position: absolute;
							left: 0;
							bottom:0;
							height: 5px;
							background: #fff;
							display: block;
							width: 60px;
						}
					}
					.box::after {
						content: "|";
						margin: 0 36px;
						color: rgba(255, 255, 255, 0.2);
						font-weight: initial;
						font-size: 18px;
					}

					.box:last-child::after {
						display: none;
					}

				}

				.user {
					display: flex;
					height: 95px;
					justify-content: center;
					align-items: center;

					.box {
						font-size: 16px;
						line-height: 28px;
						color: #FFFFFF;
						font-weight: 400;
						background: url(../../assets/images/usericon.png) no-repeat left center;
						padding-left: 22px;
					}

					.bt {
						width: 62px;
						height: 28px;
						line-height: 28px;
						text-align: center;
						background: #FFFFFF;
						border-radius: 5px 5px 5px 5px;
						font-size: 12px;
						color: #000000;
						font-weight: 400;
						margin-left: 10px;
						cursor: pointer;
					}
				}
			}
			.slogan{
				color: #fff;
				font-size: 42px;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
				letter-spacing: 3px;
				line-height: 55px;
				margin: 84px 0 54px;
				background: linear-gradient(83.43932649717124deg, #FAFEFE 0%, #F3F9FF 41%, #B6C9EB 100%);
				-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
				-webkit-text-fill-color: transparent;/*给文字设置成透明*/
			}
			.search{
				display: flex;
				justify-content: center;
				align-items: center;
				.box{
					display: flex;
					.search-bt{
						width: 120px;
						height: 53px;
						background: #FA8901;
						border-radius: 0px 4px 4px 0px;
						font-size: 22px;
						color: #FFFFFF;
						font-weight: 400;
						text-align: center;
						line-height: 53px;
						letter-spacing: 2px;
					}
				}
				.advanced-search{
					width: 32px;
					height: 40px;
					line-height: 20px;
					font-size: 16px;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 12px;
					cursor: pointer;
					text-shadow: 0px 1px 1px rgba(0,0,0,0.7);
				}
			}
		}

		.select-box {
			display: flex;
			padding: 30px 0 0;

			.box {
				margin-right: 20px;
				width: 386px;

				.el-select {
					width: 100%;
				}
			}

			.box:last-child {
				margin-right: 0;
			}
		}

		.enterprise-list {
			.list {
				padding: 36px 0;
				border-bottom: 1px solid #E8EAEC;
				color: #000000;
				font-size: 16px;

				.tag {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 72px;
					height: 72px;
					border-radius: 4px 4px 4px 4px;
					background: #7DB3DA;
					font-size: 22px;
					color: #fff;
					margin-right: 24px;
				}

				.text {
					position: relative;
				}

				.title {
					font-size: 18px;
					font-weight: bold;
					line-height: 24px;
					margin-bottom: 14px;
				}

				.info {
					display: flex;
					margin-bottom: 14px;

					.box {
						font-weight: 400;
						line-height: 21px;
						margin-right: 60px;
						background: url(../../assets/images/icon01.png) no-repeat left center;
						padding-left: 20px;
					}

					.box:nth-child(2) {
						background: url(../../assets/images/icon02.png) no-repeat left center;
					}

					.box:nth-child(3) {
						background: url(../../assets/images/icon03.png) no-repeat left center;
					}

					.box:nth-child(4) {
						background: url(../../assets/images/icon04.png) no-repeat left center;
					}

					.box:last-child {
						margin-right: 0;
					}
				}

				.address {
					font-weight: 400;
					line-height: 21px;

					span {
						color: #999999;
					}
				}

				.details {
					position: absolute;
					right: 0;
					top: 50%;
					width: 112px;
					height: 40px;
					background: #217FE4;
					border-radius: 2px;
					text-align: center;
					line-height: 40px;
					color: #fff;
					font-size: 16px;
					font-weight: 400;
					transform: translateY(-50%);
					cursor: pointer;
				}
			}

		}

		.pagination {
			float: right;
			margin-top: 30px;
		}

		.common-footer {
			min-height: 79px;
			background: #EFF1F3;
			font-size: 12px;
			color: #656C74;
			line-height: 17px;
			margin-top: 98px;

			.topnav {
				padding: 16px 0 12px;
				text-align: center;
				display: flex;
				justify-content: center;

				.box::after {
					content: '|';
					margin: 0 12px;
					color: #656C74;
				}

				.box:last-child::after {
					display: none;
				}
			}

			.binfo {
				display: flex;

				.box {
					margin-right: 90px;
				}

				.box:last-child {
					margin-right: 0;
					background: url(../../assets/images/ficon01.png) no-repeat left center;
					padding-left: 20px;
				}
			}
		}
	}
</style>
<style>
	.home .enterprise-list .list:nth-child(5n+2) .tag {
		background: #BC9EDD;
	}

	.home .enterprise-list .list:nth-child(5n+3) .tag {
		background: #8CA3CE;
	}

	.home .enterprise-list .list:nth-child(5n+4) .tag {
		background: #D1AE9E;
	}

	.home .enterprise-list .list:nth-child(5n+5) .tag {
		background: #84CAB0;
	}
	.search .el-input{width: 706px;}
	.search .el-input.el-input--medium .el-input__inner{height: 53px;line-height: 53px;width: 100%;border-radius: 4px 0 0 4px;color: #999999;font-size: 16px;}
	.search .el-input.el-input--medium .el-input__icon{line-height: 53px;font-size: 18px;color: #999999;}
	.home .common-footer{
		margin-top: 0px!important;
	}
  .height100{
    height: 100%;
  }
</style>
